<template>
  <div class="container">
    <!-- <div class="userinfo" @click="bindViewTap">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
      <div class="userinfo-nickname">
        <card :text="userInfo.nickName"></card>
      </div>
    </div> -->
    <div class="flex-box justify-content-center align-items-center flex-wrap">
      <div class="flex-item fb-6">
        <div class="flex-box justify-content-center align-items-center">
          <div class="flex-item">
            <div>444</div>
          </div>
          <div class="flex-item fb-6">
            <ul class="game-list">
              <li :class="{'game-selected': i === gameSelected}" v-for="(item, i) of gameList" :key="i">{{(i + 1)+ '. ' + item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="flex-item fb-12">
        <div class="flex-box">
          <div class="flex-item  fb-6">
            <div class="direction-control">
              <div class="arrow-up" @click="arrowUp">
                △
              </div>
              <div class="arrow-down" @click="arrowDown">
                ▽
              </div>
            </div>
          </div>
          <div class="flex-item fb-6">
            <div class="action-control">
              <div class="arrow-up" @click="confirm">
                A
              </div>
              <div class="arrow-down" @click="confirm">
                B
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import card from "@/components/card";

export default {
  data() {
    return {
      motto: "Hello World",
      gameSelected: 0,
      pointer: 0, // 指向当前gamelist的起点索引
      listCount: 4, // 显示的list长度
      gameList: [],
      gameListData: [
        {
          id: 1,
          name: "魂斗罗"
        },
        {
          id: 2,
          name: "超级玛丽"
        },
        {
          id: 3,
          name: "赤色要塞"
        },
        {
          id: 4,
          name: "雪人兄弟"
        },
        {
          id: 5,
          name: "马戏团"
        },
        {
          id: 6,
          name: "坦克大战"
        },
        {
          id: 7,
          name: "影子传说"
        }
      ]
    };
  },

  components: {
    card
  },

  methods: {
    bindViewTap() {
      const url = "../logs/main";
      wx.navigateTo({ url });
    },
    getUserInfo() {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: res => {
              this.userInfo = res.userInfo;
            }
          });
        }
      });
    },
    arrowUp() {
      this.changeSelection(-1);
    },
    arrowDown() {
      this.changeSelection(1);
    },
    changeSelection(direction) {
      let selected = this.gameSelected;
      let count = this.listCount - 1;
      let total = this.gameListData.length;
      let end = total - count;
      // 判断指针是否应该移动
      //
      // if (this.pointer === 0 || this.pointer === total - count) {
      if (
        !(
          (direction === 1 && this.gameSelected === count) ||
          (direction === -1 && this.gameSelected === 0)
        )
      ) {
        this.gameSelected += direction;
      } else if (
        (direction === -1 && this.gameSelected === 0 && this.pointer !== 0) ||
        (direction === 1 &&
          this.gameSelected === count &&
          this.pointer !== end - 1)
      ) {

        this.pointer += direction;
        this.sliceGameList(this.pointer);
      }
      // } else {

      // }
    },
    changeListSelection(direction) {
      // 当前选择的位置
      let selected = this.gameSelected;
      let count = this.listCount - 1;
      if (direction === "up") {
        if (selected === 0) {
          if (this.pointer === 0) {
            return;
          } else if (this.pointer < count) {
            this.pointer -= 1;
          }
          this.sliceGameList(this.pointer);
        } else {
          this.gameSelected -= 1;
        }
      } else if (direction === "down") {
        if (selected === count) {
          if (this.pointer > 0 || this.pointer <= count) {
            this.pointer += 1;
          } else if (this.pointer > 0) {
          }
          this.sliceGameList(this.pointer);
        } else {
          this.gameSelected += 1;
        }
      }
    },
    sliceGameList(pointer) {
      this.gameList = this.gameListData.slice(
        pointer,
        this.listCount + pointer
      );
    },
    confirm() {
      let game = this.gameList[this.gameSelected];
      // 选择游戏
      wx.showToast({
        title: "正在跳转到" + game.name,
        icon: "none"
      });
    }
  },
  created() {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo();
    console.error(this.globalData)
  },
  mounted() {
    this.sliceGameList(this.pointer);
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.flex-box {
  display: flex;
}

.flex-item {
  flex: 1;
}

.fb-6 {
  flex-basis: 50%;
}

.fb-12 {
  flex-basis: 100%;
}

.justify-content-center {
  justify-content: center;
}
.align-items-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.game-list {
  width: 100%;
}

.game-list li {
  box-sizing: content-box;
  padding: 2px 6px;
}

.arrow-up,
.arrow-down {
  width: 1rem;
  height: 1rem;
  border: #f44336 solid 2px;
  border-radius: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f44336;
  color: #fff;
  margin: 8px;
}

.game-selected {
  background: #f44336;
  color: #fed;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
</style>
